<script setup lang="ts">
import dayjs from "dayjs";
import { computed, ref, reactive, onMounted } from "vue";
import {
  callReport_wholeByDay
} from '@/api/index'
import ReCol from "@/components/ReCol";
import Segmented, { type OptionsType } from "@/components/ReSegmented";

import { ArrowRight } from "@element-plus/icons-vue";

// 获取当前日期
const today = dayjs();
const todayFormatted = today.format('YYYY-MM-DD');
const yesterday = today.subtract(1, 'day');
const yesterdayFormatted = yesterday.format('YYYY-MM-DD');

let curWeek = ref(0);
const optionsBasis = reactive([
  {
    label: "今日",
    type: 1
  },
  {
    label: "昨日",
    type: 2
  }
]);

const dataList = ref([]);
const loading = ref(true);
const columns: TableColumnList = [
  {
    label: "呼叫总数",
    prop: "callAll"
  },
  {
    label: "呼入数",
    prop: "callinCnt"
  },
  {
    label: "呼出数",
    prop: "calloutCnt"
  },
  {
    label: "转接数",
    prop: "transfer"
  },
  {
    label: "转接率",
    prop: "transferRate"
  },
  {
    label: "呼损数",
    prop: "lose"
  },
  {
    label: "呼损率",
    prop: "loseRate"
  },
  {
    label: "应答数",
    prop: "answer"
  },
  {
    label: "应答率",
    prop: "answerRate"
  },
  {
    label: "成功数",
    prop: "success"
  },
  {
    label: "成功率",
    prop: "successRate"
  },
  {
    label: "消费金额",
    prop: "cost"
  }
];

onMounted(() => {
  onSearch()
});

function onSearch() {
  loading.value = true;
  let type = optionsBasis[curWeek.value].type;
  callReport_wholeByDay({
    day: type == 1 ? todayFormatted : yesterdayFormatted
  }).then(res => { 
    dataList.value = [res.data]
    loading.value = false;
  }).catch(err => {
    dataList.value = []
    loading.value = false;
  })
}
</script>

<template>
  <re-col
    v-motion
    class="mb-[12px]"
    :value="24"
    :initial="{
      opacity: 0,
      y: 100
    }"
    :enter="{
      opacity: 1,
      y: 0,
      transition: {
        delay: 560
      }
    }"
  >
    <el-card shadow="never">
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <b class="text-md font-medium mr-[20px]">电话拨打概况</b>
          <Segmented v-model="curWeek" :options="optionsBasis" @change="onSearch" />
        </div>
        <el-button round style="padding: 8px">了解更多<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
      </div>

      <pure-table
        class="mt-3"
        row-key="id"
        alignWhole="center"
        showOverflowTooltip
        :loading="loading"
        :loading-config="{ background: 'transparent' }"
        :data="dataList"
        :columns="columns"
      >
        <template #empty>
          <el-empty description="暂无数据" :image-size="60"></el-empty>
        </template>
      </pure-table>
    </el-card>
  </re-col>
</template>

<style lang="scss" scoped>
ul {
  display: flex;
  align-items: center;

  li {
    margin-right: 80px;
    text-align: center;

    span {
      font-size: 14px;
      color: #929292;
    }

    p {
      font-size: 16px;
      color: #222222;
      font-weight: bold;
      margin-top: 8px;
    }
  }
}
</style>
